<template>
  <div class="content-box">
    <div class="top">
      <el-row :gutter="10">
        <el-col :sm="12" :md="12" :lg="6">
          <div class="box green flex fx-jc-between box-shadow" @click="$router.push('/dev/device')">
            <div class="left flex fx-ac-between">
              <div class="title flex fx-ai-center">
                <div class="circle flex fx-ai-center fx-jc-center">
                  <img
                      src="@/assets/img/index_icon_1.png"
                      alt=""
                  >
                </div>
                <span>{{ $t('wel.topTable1.title') }}</span>
              </div>
              <div class="device-num">
                <div class="item flex fx-ai-center" @click="$router.push('/dev/device')">
                  <div class="block light-gray"/>
                  <span class="key">{{ $t('wel.topTable1.column1') }}</span>
                  <span class="val">{{ dataInfo.deviceOnline || 0 }}</span>
                </div>
                <div class="item flex fx-ai-center" @click="$router.push('/dev/device')">
                  <div class="block light-gray"/>
                  <span class="key">{{ $t('wel.topTable1.column2') }}</span>
                  <span class="val">{{ dataInfo.deviceOffline || 0 }}</span>
                </div>
                <div class="item flex fx-ai-center" @click.stop="$router.push('/dev/Discovery')">
                  <div class="block light-gray"/>
                  <span class="key">{{ $t('wel.topTable1.column3') }}</span>
                  <span class="val">{{ dataInfo.toBeCertified || 0 }}</span>
                </div>
              </div>
            </div>
            <div class="right">
              <div
                  id="chart1"
                  style="width: 100px;height: 100px;"
              />
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :md="12" :lg="6">
          <div class="box orange flex fx-jc-between box-shadow" @click="$router.push('/ipsProgram/index')">
            <div class="left flex fx-ac-between">
              <div class="title flex fx-ai-center">
                <div class="circle flex fx-ai-center fx-jc-center">
                  <img
                      src="@/assets/img/index_icon_2.png"
                      alt=""
                  >
                </div>
                <span>{{ $t('wel.topTable2.title') }}</span>
              </div>
              <div class="programer-num">
                {{ dataInfo.programTotal || 0 }}
              </div>
            </div>
            <div class="right">
              <div class="item-box flex">
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.programSuccess || 0 }}</div>
                  <div class="key" style="font-size: 12px;">{{ $t('wel.topTable2.column1') }}</div>
                </div>
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.programWait || 0 }}</div>
                  <div class="key" style="font-size: 12px;">{{ $t('wel.topTable2.column2') }}</div>
                </div>
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.programFail || 0 }}</div>
                  <div class="key" style="font-size: 12px;" >{{ $t('wel.topTable2.column3') }}</div>
                </div>
              </div>
              <img class="add" src="@/assets/img/add.png" alt=""
                   @click.stop="$router.push({path: '/ipsProgram/index', query: {handleAdd: true}})"
              >
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :md="12" :lg="6">
          <div class="box light-blue flex fx-jc-between box-shadow" @click="$router.push('/ips/channel')">
            <div class="left flex fx-ac-between">
              <div class="title flex fx-ai-center">
                <div class="circle flex fx-ai-center fx-jc-center">
                  <img
                      src="@/assets/img/index_icon_2.png"
                      alt=""
                  >
                </div>
                <span>{{ $t('wel.topTable3.title') }}</span>
              </div>
              <div class="programer-num">
                {{ dataInfo.channelTotal || 0 }}
              </div>
            </div>
            <div class="right">
              <div class="item-box flex">
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.published || 0 }}</div>
                  <div class="key" style="font-size: 12px;">{{ $t('wel.topTable3.column1') }}</div>
                </div>
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.approvedNum || 0 }}</div>
                  <div class="key" style="font-size: 12px;">{{ $t('wel.topTable3.column2') }}</div>
                </div>
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.passNum || 0 }}</div>
                  <div class="key" style="font-size: 12px;">{{ $t('wel.topTable3.column3') }}</div>
                </div>
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.notReviewed || 0 }}</div>
                  <div class="key" style="font-size: 12px;">{{ $t('wel.topTable3.column4') }}</div>
                </div>
                <div class="item">
                  <div class="val" style="font-size: 12px;">{{ dataInfo.toBeReleased || 0 }}</div>
                  <div class="key" style="font-size: 12px;">{{ $t('wel.topTable3.column5') }}</div>
                </div>
              </div>
              <img class="add" src="@/assets/img/add.png" alt=""
                   @click.stop="$router.push({path: '/ips/channel', query: {handleAdd: true}})"
              >
            </div>
          </div>
        </el-col>
        <!-- <el-col :md="4">
          <div class="box blue flex fx-jc-between box-shadow" @click="$router.push('/system/dataset')">
            <div class="left flex fx-ac-between">
              <div class="title flex fx-ai-center">
                <div class="circle flex fx-ai-center fx-jc-center">
                  <img
                    src="@/assets/img/index_icon_4.png"
                    alt=""
                  >
                </div>
                <span>数据源</span>
              </div>
              <div class="programer-num">
                14
              </div>
            </div>
            <div class="right">
              <img class="add" src="@/assets/img/add.png" alt="" @click.stop="$router.push({name: 'Dataset', params: {handleAdd: true}})">
            </div>
          </div>
        </el-col> -->
        <el-col :sm="12" :md="12" :lg="6">
          <div class="last-box flex fx-ac-between box-shadow" @click="$router.push('/monitor/server')">
            <div class="title flex fx-ai-center">
              <div class="circle flex fx-ai-center fx-jc-center">
                <img
                    src="@/assets/img/index_icon_5.png"
                    alt=""
                >
              </div>
              <span>{{ $t('wel.topTable4.title') }}</span>
            </div>

            <div class="item-box">
              <div class="item flex fx-ai-center">
                <div class="key">{{ $t('wel.topTable4.column1') }}</div>
                <div v-if="server.jvm" class="val">{{ server.jvm.runTime || 0 }}</div>
              </div>
              <!-- <span class="line" /> -->
              <div class="item flex fx-ai-center fx-1">
                <div class="key">{{ $t('wel.topTable4.column2') }}</div>
                <div v-if="server.mem" class="val">{{ server.mem.usage || 0 }}%</div>
              </div>
              <!-- <span class="line" /> -->
              <div class="item flex fx-ai-center fx-1">
                <div class="key">{{ $t('wel.topTable4.column3') }}</div>
                <div class="val">{{ free || 0 }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="bar-box flex">
      <div class="item box-shadow fx-1">
        <div
            id="chart-bar-1"
            style="width: 100%;height: 300px;"
        />
      </div>
      <!-- <div class="item box-shadow fx-1">
        <div
          id="chart-bar-2"
          style="width: 100%;height: 300px;"
        />
      </div> -->
    </div>

    <div class="list-item-box flex">
      <el-row :gutter="10" style="width: 100%;">
        <el-col :sm="12" :md="12" :lg="12">
          <div class="item box-shadow fx-1" style="min-height: 300px;">
            <div class="title">{{ $t('wel.info.info') }}
              <!-- <span>1</span> -->
              <span class="key" style="font-size: 16px; background:#696969; color:#fff ;margin-left:auto;cursor:pointer"
                    @click="$router.push({path: '/auditRecord/index'})"
              >{{ $t('wel.more') }}</span>
            </div>
            <!-- <div class="itm-box flex">
              <div class="itm fx-1">
                <div class="val">78</div>
                <div class="key">已读消息</div>
              </div>
              <div class="itm fx-1">
                <div class="val">28</div>
                <div class="key">未读消息</div>
              </div>
            </div> -->

            <table>
              <thead>
              <tr>
                <th style="width: 30%">{{ $t('wel.info.program') }}</th>
                <th style="width: 25%">{{ $t('wel.info.name') }}</th>
                <th style="width: 10%">{{ $t('wel.info.people') }}</th>
                <th style="width: 10%">{{ $t('wel.info.status') }}</th>
                <th style="width: 25%">{{ $t('wel.info.time') }}</th>
              </tr>
              </thead>
              <tbody v-for="item in auditRecordList" :key="item">
              <tr>
                <td>{{ formatLongText(item.name, 20) }}</td>
                <td>{{ formatLongText(item.groupName, 15) }}</td>
                <td>{{ formatLongText(item.checkBy, 8) }}</td>
                <td>{{ item.status == 2 ? '通过' : '拒绝' }}</td>
                <td>{{ parseTime(item.checkTime) }}</td>
              </tr>
              </tbody>
            </table>
            <!-- <el-table :data="auditRecordList" stripe style="width: 100%;margin-top:10px;">
              <el-table-column prop="name" label="节目" width="160" />
              <el-table-column prop="groupName" :label="$t('equipment.programSort')" width="110" />
              <el-table-column prop="checkBy" :label="$t('program.reviewer')" width="60" />
              <el-table-column label="审核时间" align="center" prop="checkTime">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.checkTime) }}</span>
                </template>
              </el-table-column>
            </el-table> -->
          </div>
        </el-col>
        <el-col :sm="12" :md="12" :lg="12">
          <div class="last-box flex fx-ac-between box-shadow">
            <div class="item box-shadow fx-1" style="min-height: 300px;">
              <div class="title">
                {{ $t('wel.event.title') }}
                <span class="key"
                      style="font-size: 16px; background:#696969; color:#fff ;margin-left:auto;;cursor:pointer"
                      @click="$router.push({path: '/dev/appLog'})"
                >更多</span>
              </div>
              <table>
                <thead>
                <tr>
                  <th>{{ $t('wel.event.event') }}</th>
                  <th>{{ $t('wel.event.equipment') }}</th>
                  <th>{{ $t('wel.event.time') }}</th>
                </tr>
                </thead>
                <tbody v-for="item in appLogList" :key="item">
                <tr>
                  <td>{{ item.title }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.createTime }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="list-item-box flex">
      <el-row :gutter="10" style="width: 100%;">
        <el-col :sm="12" :md="12" :lg="12">
          <div class="item box-shadow fx-1" style="min-height: 300px;">
            <div class="title">
              {{ $t('wel.channel.title2') }}
            </div>
            <table>
              <thead>
              <tr>
                <th>{{ $t('wel.channel.name') }}</th>
                <th>{{ $t('equipment.createPeople') }}</th>
                <th>{{ $t('equipment.createTime') }}</th>
                <th>{{ $t('wel.channel.control') }}</th>
              </tr>
              </thead>
              <tbody v-for="item in programList" :key="item">
              <tr>
                <!-- <td>{{ item.name && item.name.length > 10 ? item.name.substring(0,10) + '...' : item.name }}</td> -->
                <td>{{ item.name }}</td>
                <td>{{ item.createBy }}</td>
                <td>{{ item.createTime }}</td>
                <td><span class="view" @click="$router.push({path: '/ipsProgram/index?name=' + item.name})"
                >{{ $t('wel.channel.approval') }}</span></td>
                <!-- <td><span class="view" @click="$router.push('/ipsProgram/index')">去审批</span></td> -->
              </tr>
              </tbody>
            </table>
            <span v-if="programList.length ==0" class="el-table__empty-text">暂无数据</span>
          </div>
        </el-col>
        <el-col :sm="12" :md="12" :lg="12">
          <div class="last-box flex fx-ac-between box-shadow">
            <div class="item box-shadow fx-1" style="min-height: 300px;">
              <div class="title">
                {{ $t('wel.channel.title1') }}
              </div>
              <table>
                <thead>
                <tr>
                  <th>{{ $t('equipment.channelName') }}</th>
                  <th>{{ $t('equipment.createPeople') }}</th>
                  <th>{{ $t('equipment.createTime') }}</th>
                  <th>{{ $t('wel.channel.control') }}</th>
                </tr>
                </thead>
                <tbody v-for="item1 in schedulingList" :key="item1">
                <tr>
                  <!-- <td>{{ item1.name && item1.name.length > 10 ? item1.name.substring(0,10) + '...' : item1.name }}</td> -->
                  <td>{{ item1.name }}</td>
                  <td>{{ item1.createBy }}</td>
                  <td>{{ item1.createTime }}</td>
                  <td><span class="view" @click="$router.push('/ips/channel')">{{ $t('wel.channel.approval') }}</span>
                  </td>
                </tr>
                </tbody>
              </table>
              <span v-if="schedulingList.length ==0" class="el-table__empty-text">暂无数据</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import { list as getNoticeList } from "@/api/member_center/platform_notice";
import { mapGetters } from 'vuex'
import { getServer/*服务器数据(状态)*/ } from '@/api/monitor/server'
import { auditRecordProgram/*消息*/ } from '@/api/ips/audit'
import { getDataInfo/*统计数据(设备/节目/频道)*/, getProgramInfo/*待审批节目*/, getAppLogInfo/*设备事件*/, getQueueInfo/*队列实时概况*/, getSchedulingInfo/*审批频道*/ } from '@/api/ips/statistics'
import eventbus from '@/utils/eventbus'
// const defaultAvatar = require("@/assets/img/avatar.png");
export default {
  name: 'Wel',
  data() {
    return {
      programStatus: false,
      schedulingStatus: true,
      server: {},
      dataInfo: {},
      programList: {},
      schedulingList: {},
      appLogList: {},
      free: 0,
      auditRecordList: [],
      queueName: [],
      queueCount: []
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
  },
  mounted() {
    this.getList()
    eventbus.$on('websocket', (data) => {
      if (data.type == '118' /*后端定义常量消息结构：更新设备在线状态*/) {
        this.getList()
      }
    })
    this.$once('hook:beforeDestroy', () => {
      eventbus.$off('websocket')
    })
  },
  methods: {

    showStatus() {
      if (this.schedulingStatus === true) {
        this.schedulingStatus = false
        this.programStatus = true
      } else {
        this.schedulingStatus = true
        this.programStatus = false
      }
    },
    setCircleChart(val) {
      // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
      var chart1 = this.$echarts.init(document.getElementById('chart1'))
      // 圆环图各环节的颜色
      var color = ['#A0C0F0', '#BFD5F5', '#DFEAFA']

      // 圆环图各环节的名称和值(系列中各数据项的名称和值)
      var data = [
        {
          name: '运行设备',
          value: this.dataInfo.deviceOnline || 0
        },
        {
          name: '空闲设备',
          value: this.dataInfo.deviceFree || 0
        },
        {
          name: '下线设备',
          value: this.dataInfo.deviceOffline || 0
        }
      ]

      // 指定图表的配置项和数据
      var option = {

        // 提示框
        tooltip: {
          show: true, // 是否显示提示框
          formatter: '{b} </br> {c}台' // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
        },

        // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
        graphic: {
          type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
          top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
          left: 'center', // 同上
          style: {
            text: val, // 文本块文字。可以使用 \n 来换行。[ default: '' ]
            fill: '#fff', // 填充色。
            fontSize: 12, // 字体大小
            lineHeight: 16,
            fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
          }
        },

        // 系列列表
        series: [
          {
            type: 'pie', // 系列类型
            center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ['65%', '90%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            color: color, // 圆环图的颜色
            label: {
              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
              normal: {
                show: false, // 是否显示标签[ default: false ]
                position: 'outside', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                formatter: '{b} : {c}件' // 标签内容
              }
            },
            labelLine: {
              // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
              normal: {
                show: false, // 是否显示视觉引导线。
                length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                length2: 10, // 视觉引导项第二段的长度。
                lineStyle: {
                  // 视觉引导线的样式
                  // color: '#000',
                  // width: 1
                }
              }
            },
            data: data // 系列中的数据内容数组。
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      chart1.setOption(option)
    },

    setbarChart1() {
      // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
      const chart1 = this.$echarts.init(document.getElementById('chart-bar-1'))
      var max = Math.max.apply(null, this.queueCount)

      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: '队列实时概况'
        },
        // 提示框
        tooltip: {
          show: true, // 是否显示提示框
          formatter: '{c}' // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
        },
        grid: {
          left: '30px',
          top: '50px',
          bottom: '30px',
          right: '30px'
        },
        xAxis: {
          type: 'category',
          data: this.queueName,
          axisLabel:{interval: 0}
        },
        yAxis: {
          type: 'value',
          max: max,
          min: 0
        },
        series: [{
          data: this.queueCount,
          type: 'bar',
          itemStyle: {
            color: '#6096E6'
          },
          barWidth: 40 // 柱图宽度
        }]
      }

      // 使用刚指定的配置项和数据显示图表
      chart1.setOption(option)
    },

    setbarChart2() {
      // 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
      const chart1 = this.$echarts.init(document.getElementById('chart-bar-2'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          show: true,
          text: '数据源更新汇总'
        },
        // 提示框
        tooltip: {
          show: true, // 是否显示提示框
          formatter: '{a}: {c}' // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
        },
        legend: {
          data: ['更新成功', '更新失败']
        },
        grid: {
          left: '30px',
          top: '50px',
          bottom: '30px',
          right: '30px'
        },
        xAxis: {
          data: ['儿科值班表', '妇科值班表', '医生信息', '科室介绍', '护士信息', '病人信息']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [10, 20, 30, 40, 50, 60],
          type: 'bar',
          name: '更新失败',
          itemStyle: {
            color: '#E85E72'
          },
          barWidth: 30 // 柱图宽度
        }, {
          data: [5, 10, 20, 30, 40, 50],
          type: 'bar',
          name: '更新成功',
          barGap: '-100%', /* 这里设置包含关系，只需要这一句话*/
          itemStyle: {
            color: '#56CA95'
          },
          barWidth: 30 // 柱图宽度
        }]
      }

      // 使用刚指定的配置项和数据显示图表
      chart1.setOption(option)
    },

    /** 查询服务器信息 */
    getList() {
      getServer().then(response => {
        this.server = response.data
        if (response.data) {
          if (response.data.sysFiles.length > 0) {
            let temp = 0
            response.data.sysFiles.forEach(element => {
              temp += this.getFree(element.free)
            })
            this.free = this.translate(temp)
          }
        }
      })

      auditRecordProgram().then(response => {
        this.auditRecordList = response.data
      })

      getDataInfo().then(response => {
        this.dataInfo = response.data
        this.setCircleChart((this.dataInfo.devicePecent * 100).toFixed(1) + '%')
        // this.setbarChart2()
      })

      getProgramInfo().then(response => {
        this.programList = response.data
      })

      getSchedulingInfo().then(response => {
        this.schedulingList = response.data
      })

      getAppLogInfo().then(response => {
        this.appLogList = response.data
      })

      getQueueInfo().then(response => {
        this.queueName = response.data.name ? response.data.name.split(',') : []
        this.queueCount = response.data.count ? response.data.count.split(',') : []
        this.setbarChart1()
      })
    },
    formatLongText(value, length) {
      if (value) {
        if (value.length > length) {
          return value.substr(0, length) + '...'
        } else {
          return value
        }
      } else {
        return ''
      }
    },

    getFree(free) {
      if (free.indexOf('MB') !== -1) {
        return Math.ceil(Number(free.split('MB')[0]))
      } else if (free.indexOf('GB') !== -1) {
        const temp = Math.ceil(Number(free.split('GB')[0]))
        return temp * 1024
      }
      return 0
    },

    translate(free) {
      if (free > 1024) {
        return (free / 1024).toFixed(2) + 'GB'
      }
      return free + 'MB'
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.unChooseTitle {
  font-size: 16px;
  color: gray;
}

.top {
  .box {
    border-radius: 10px;
    color: white;
    padding: 10px 14px;
    height: 110px;
    position: relative;
    cursor: pointer;

    .add {
      width: 24px;
      position: absolute;
      right: 14px;
      bottom: 10px;
    }

    &.green {
      background: linear-gradient(165deg, #69D19F, #53D096, #62D19D);

      .left {
        .title {
          .circle {
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: rgba(256, 256, 256, 0.3);

            img {
              width: 15px;
            }
          }

          span {
            font-size: 18px;
            margin-left: 5px;
          }
        }

        .device-num {
          font-size: 12px;
          margin-bottom: 4px;
          margin-left: 4px;

          .item {
            margin-top: 5px;
          }

          .block {
            width: 8px;
            height: 8px;
            background: white;

            &.gray {
              background: #A0C0F0;
            }

            &.light-gray {
              background: #BFD5F5;
            }

            &.white {
              background: #DFEAFA;
            }
          }

          .key {
            margin-left: 5px;
          }

          .val {
            margin-left: 10px;
          }
        }
      }
    }

    &.orange {
      background: linear-gradient(165deg, #FFC16A, #FFBD50, #F7B647);

      .left {
        .title {
          .circle {
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: rgba(256, 256, 256, 0.3);

            img {
              width: 15px;
            }
          }

          span {
            font-size: 18px;
            margin-left: 5px;
          }
        }

        .programer-num {
          font-size: 30px;
        }
      }

      .right {
        .item-box {
          padding-bottom: 10px;
          border-bottom: 1px solid white;

          .item {
            text-align: center;
            margin: 0 5px;

            .val {
              font-size: 20px;
            }

            .key {
              font-size: 12px;
            }
          }
        }
      }
    }

    &.light-blue {
      background: linear-gradient(165deg, #6CBDE9, #52B8EC, #41A8DC);

      .left {
        .title {
          .circle {
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: rgba(256, 256, 256, 0.3);

            img {
              width: 15px;
            }
          }

          span {
            font-size: 18px;
            margin-left: 5px;
          }
        }

        .programer-num {
          font-size: 30px;
        }
      }

      .right {
        .item-box {
          padding-bottom: 10px;
          border-bottom: 1px solid white;

          .item {
            text-align: center;
            margin: 0 5px;

            .val {
              font-size: 20px;
            }

            .key {
              font-size: 12px;
            }
          }
        }
      }
    }

    &.blue {
      background: linear-gradient(165deg, #70A0EB, #5995ED, #4A86DE);

      .left {
        .title {
          .circle {
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: rgba(256, 256, 256, 0.3);

            img {
              width: 15px;
            }
          }

          span {
            font-size: 18px;
            margin-left: 5px;
          }
        }

        .programer-num {
          font-size: 30px;
        }
      }
    }
  }

  .last-box {
    padding: 12px 16px 9px;
    border: 1px solid #cccccc;
    background: linear-gradient(165deg, #76dbf5, #58defd, #21d4fd);
    height: 108px;
    border-radius: 10px;

    .title {
      color: white;

      img {
        width: 30px;
      }

      span {
        font-size: 18px;
        margin-left: 10px;
      }
    }

    .item-box {
      .item {
        margin-bottom: 2px;

        .key {
          font-size: 14px;
          color: white;
          margin-right: 20px;
        }

        .val {
          font-size: 14px;
          color: white;
        }
      }

      .line {
        height: 25px;
        width: 1px;
        background: #eeeeee;
      }
    }
  }
}

.bar-box {
  .item {
    padding: 20px;
    margin-left: 10px;
    border-radius: 5px;

    &:first-child {
      margin-left: 0;
    }
  }
}

.list-item-box {
  margin-top: 10px;
  margin-bottom: 60px;

  .item {
    padding: 20px;
    border-radius: 5px;
    background: white;
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      display: flex;

      span {
        background: rgb(8, 0, 0);
        color: white;
        border-radius: 5px;
        padding: 0 4px;
        line-height: 20px;
        margin-left: 5px;
        font-size: 14px;
        font-weight: normal;
      }
    }

    .itm-box {
      text-align: center;
      margin-top: 20px;

      .itm {
        color: #808080;

        .val {
          font-size: 40px;
        }

        .key {
          font-size: 14px;
        }
      }
    }

    table {
      color: #aaaaaa;
      font-size: 14px;
      width: 100%;
      text-align: center;
      margin-top: 20px;

      td, th {
        padding: 6px 0;

        .view {
          color: #91B9EF;
          cursor: pointer;
        }
      }
    }
  }
}

.box-shadow {
  background: white;
  box-shadow: 5px 5px 5px #eeeeee;
}

@media screen and (max-width: 1800px) {
  // .top{
  //   .last-box {
  //     .item-box{
  //       .item{
  //         .val{
  //           font-size:17px;
  //         }
  //       }
  //     }
  //   }
  // }
}

@media screen and (max-width: 1600px) {
  body {
    // .top{
    //   .last-box {
    //     .item-box{
    //       .item{
    //         .val{
    //           font-size:16px;
    //         }
    //       }
    //     }
    //   }
    // }
    .top .box.orange .right .item-box .item, .top .box.light-blue .right .item-box .item {
      margin: 0 3px;
    }
  }
}

/deep/ .el-table__empty-text {
  position: absolute;
  text-align: center;
  right: 0px;
  width: 50%;
}
</style>
